<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="../lib/css/bootstrap.css" rel="stylesheet">
    <style>
        body {
            font-family: '微软雅黑';
        }

        thead {
            background-color: #f5f5f5;
            /*font-weight: 700;*/
        }

        th {
            text-align: center;
        }

        .pagination {
            margin: 0;
        }

        .control:hover {
            background: transparent!important;
            /*cursor: not-allowed;  */
        }

        tbody td {
            text-align: center;
        }

        .panel {
            position: relative;
        }

        .panel::before {
            content: '';
            width: 100%;
            height: 100%;
            background: url('../images/loading.gif')no-repeat center, rgba(88, 101, 181, 0.8);
            position: absolute;
            z-index: 10;
            display: none;
        }

        .panel.cover::before {
            display: block;
        }
        /* a标签的禁用样式 */

        a.disabled {
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="page-header">
            <h1>后台管理系统 <small>--讲师管理</small></h1>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">讲师列表</div>
            <div class="panel-body">
                <table class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>昵称</th>
                            <th>学校</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        
                    </tbody>
                </table>
                <div>
                    <nav aria-label="Page navigation">
                        <button class="btn btn-default" data-toggle="modal" data-target="#addModal">新增</button>
                        <ul class="pagination pull-right">
                            
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <!-- 新增弹出框 -->
    <div id='addModal' class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">新增窗口</h4>
                </div>
                <div class="modal-body">
                    <form id="newUser">
                        <div class="form-group">
                            <label for="inputUserName">用户名</label>
                            <input name='username' type="text" class="form-control" id="inputUserName" placeholder="请输入用户名">
                        </div>
                        <div class="form-group">
                            <label for="inputUserPass">密码</label>
                            <input name='password' type="password" class="form-control" id="inputUserPass" placeholder="请输入密码">
                        </div>
                        <div class="form-group">
                            <label for="inputName">真实姓名</label>
                            <input name='name' type="text" class="form-control" id="inputName" placeholder="请输入真实姓名">
                        </div>
                        <div class="form-group">
                            <label for="inputSchool">学校</label>
                            <input name='school' type="text" class="form-control" id="inputSchool" placeholder="请输入学校">
                        </div>
                        <div class="form-group">
                            <label for="inputAge">年龄</label>
                            <input name='age' type="text" class="form-control" id="inputAge" placeholder="请输入年龄">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" id="cancel" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" id="save" class="btn btn-primary" data-dismiss="modal">保存</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 首页动态数据列表的模板 -->
    <script type="text/template" id="stuListTemp">
        <% for(var i=0;i<list.length;i++){%>
            <tr>
                <td><%= (pageNum - 1) * pageSize + i + 1 %></td>
                <td><%=list[i].name%></td>
                <td><%=list[i].age%></td>
                <td><%=list[i].username%></td>
                <td><%=list[i].school%></td>
                <td><a href="javascript:;" data-id="<%=list[i].id%>" class="delete" title="删除"><span class="glyphicon glyphicon-remove"></span></a></td>
            </tr>
        <% }%>
    </script>
    <!-- 分页结构块的模板 -->
    <script type="text/template" id="pageTemp">
        <li>
            <a class="prev <%=pageNum==1?'disabled':''%>" href="javascript:void(0)" aria-label="Previous" data-Page="<%=pageNum-1%>">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <li><a class='control curr' href="javascript:void(0)"><%=pageNum%></a></li>
        <li><a class='control' href="javascript:void(0)">/</a></li>
        <li><a class='control total' href="javascript:void(0)"><%=totalPage%></a></li>
        <li>
            <a class="next <%=pageNum==totalPage?'disabled':''%>" href="javascript:void(0)" aria-label="Next" data-Page="<%=pageNum+1%>">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </script>
    <script src="../lib/js/jquery-1.12.4.js"></script>
    <script src="../lib/js/bootstrap.min.js"></script>
    <!--引入模板引擎js文件-->
    <script src="../lib/js/template-native.js"></script>
    <script>
        // 动态展示首页数据
        function render(cpage,pageSize){
            $.ajax({
            type:'get',
            url:'findUsers.php',
            data:{
                pageNum:cpage || 1,
                pageSize:pageSize || 2
            },
            dataType:"json",
            success:function(result){
                console.log(result);
                // 渲染数据列表
                var html = template("stuListTemp",result);
                $("tbody").html(html);

                // 渲染分页结构块
                var pageHtml = template("pageTemp",{"pageNum":result.pageNum,"totalPage":Math.ceil(result.total/result.pageSize)});
                $(".pagination").html(pageHtml);

                // 将当前页码存储在全局的变量中，供其它事件来使用
                window.pageNum = result.pageNum;
            }
            });
        }
        render();

        // 实现分页功能--事件委托来实现
        $(".pagination").on("click","a",function(){
            // 如果是第一页或者最后 一页则不进行响应处理
            if($(this).hasClass("disabled")){
                return;
            }
            // 单击了上一页或者下一页按钮的时候才进行响应处理
            if($(this).hasClass("prev") || $(this).hasClass("next")){
                var currentPage = $(this).attr("data-page");
                // alert(currentPage);
                render(currentPage);
            }
        })

        // 实现新增操作
        $("#save").on("click",function(){
            $.ajax({
                type:'post',
                url:'saveUser.php',
                data:$("#newUser").serialize(),
                dataType:'json',
                beforeSend:function(){},
                success:function(result){
                    console.log(result);
                    if(result.status == "ok"){
                        alert('新增成功');
                        render();
                    }
                }
            });
        });

        // 实现删除功能
        $("tbody").on("click",".delete",function(){
            // 底部用户是否真的需要删除
            if(window.confirm('请问是否真的需要删除?')){
                var id = $(this).attr("data-id");
                $.ajax({
                   type:'post',
                   url:'removeUser.php',
                   data:{"id":id},
                   dataType:'json',
                   success:function(result){
                        if(result.status == "ok"){
                            alert('删除成功');
                            // 注意：删除和刷新是两个不同的操作。如果这一次删除之后但是在刷新之前，我们发现这个tbody中的tr的数量只有一个，那么就说明刷新之后这一页应该没有数据了，那么就应该显示上一页的内容
                            if($("tbody").children().length == 1){
                                // 判断当前是否是第一页，如果是第一页就直接刷新第一页而不是上一页
                                if(window.pageNum == 1){
                                    render(window.pageNum);
                                }else{     
                                    render(window.pageNum - 1);
                                }
                            }
                            render(window.pageNum);
                        }
                   }
               });
            }
        });

    </script>
</body>
</html>
